前言

上一篇完成了 Cucumber 設定，並且利用 Cucumber 改寫了 application.cy.ts 的測試內容。今天會利用 login.cy.ts 來說明 Cucumber 語法。

範例程式

如先前文章說明，這篇會使用到 cypress/features 內的 login.feature 檔案，以及 cypress/steps 內的 login.step.ts 檔案來進行說明。

利用 Cucumber 傳遞測試資料

在 application.feature 中的測試規格與其對應步驟，都是利用固定的描述文字所撰寫。然而，實務上在不同的測試情境下使用不同的資料是更為常見，若都使用固定的描述文字會需要一直撰寫不同的測試步驟。

Scenario: 不存在使用者帳號
  Given 瀏覽 2022 鐵人賽範例首頁
  And 點選標題列登入按鈕
  When 輸入帳號 "userB" 與密碼 ""
  Then 錯誤訊息應顯示 "此帳號不存在"
  And 無法按下登入按鈕

Scenario: 錯誤使用者帳號密碼
  Given 瀏覽 2022 鐵人賽範例首頁
  And 點選標題列登入按鈕
  When 輸入帳號 "userA" 與密碼 "0000"
  And 點選登入按鈕
  Then 顯示 "登入失敗" 訊息

Scenario: 正確使用者帳號密碼
  Given 瀏覽 2022 鐵人賽範例首頁
  And 點選標題列登入按鈕
  When 輸入帳號 "userA" 與密碼 "1234567"
  And 點選登入按鈕
  Then 顯示 "登入成功" 訊息

在上面的三個測試案例規格中，都有「輸入帳號與密碼」的步驟，且所使用的帳號與密碼皆不同。如上面程式，此時步驟的描述文字會使用 {} 的方式來接收傳入的資料，而 {} 內可以指定 string 或 int 來決定傳入資料的型別是文字，其他型別的設定則為：

When('輸入帳號 {string} 與密碼 {string}', (id: string, password: string) => {
  cy.inputIdAndPassword(id, password);
});

Cucumber 生命週期

在原本的登入作業測試案例中，我們在 before() 與 after() 方法去新增與移除初始資料。而Cucumber 提供 Before() 與 After() 兩個生命週期方法，這兩個方法會對應 Cypress 的 beforeEach() 與 afterEach() 兩方法，在每一個測試案例執行前後被觸發。因此，我們可以在這兩個生命週期方法來處理測試資料的初始化。

Before({ tags: '@login' }, function () {
  cy.request('POST', `${Cypress.env('apiUrl')}/users`, {
    id: 'userA',
    password: '1234567',
  });
});

After({ tags: '@login' }, function () {
  cy.request('DELETE', `${Cypress.env('apiUrl')}/users/userA`);
});

順道一提，上面程式中，我們在 Before() 與 After() 方法都指定了 tags: '@login' ，此代表著只有測試規格中有設定 @login 標籤的測試案例才會執行。

Feature: 使用者登入作業

  Scenario: 進入登入頁面
    ...

  @login
  Scenario: 不存在使用者帳號
    ...

  @login
  Scenario: 錯誤使用者帳號密碼
    ...

  @login
  Scenario: 正確使用者帳號密碼
    ...

如上面的測試規格中，因為「進入登入頁面」的測試案例沒有指定 @login 標籤，而不會去執行測試資料的初始化作業。

接下來

這一篇利用 Cucumber 改寫登入作業的測試案例，完整的測試程式可以參考 GitHub。端對端測試的說明到此告一個段落，接下來，這系列的最後一部份會來說明如何在 Jankins 與 GitHub Actions 中去執行單元測試與端對端測試，並產生對應的測試報告。